<script setup>

import {
  ArrowDown,
  Avatar, CircleCheck, CloseBold,
  Compass,
  DataLine, EditPen,
  Fold, HelpFilled, Position,
  Postcard,
  RefreshRight,
  School,
  User,
  VideoCamera
} from "@element-plus/icons-vue";
import {getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from "vue";
import {
  getNowUserSubmitInfo,
  getNowUserInfo,
  getSchoolInfo,
  passSchoolInfo,
  refuseSchoolInfo,
  submitInformation,
  adminGetCourseInfo,
  adminGetUserInfo,
  adminGetVideoInfo,
  schoolGetCourseInfo,
  schoolGetUserInfo,
  schoolGetVideoInfo,
  getMaxPlayCountVideo,
  getMaxVisitPractice,
  getTodayUserInfo,
  getStatisticData,
  getFeedBack, getUserInfoById, getCourseInfoById, getVideoInfoById
} from "../../api/background/home.js";
import {ElNotification} from "element-plus";
import {logout} from "../../api/background/home.js";
import router from "../../router/index.js";
import moment from "moment";
import {isPermission} from "@/utils/utils.js";
/*------------------常规变量----------------*/
// menu下标
let tabIndex = ref('1');
// 学校审核表单
let schoolForm = {
  schoolName: '',
  proofImg: '',
}
// 用户输入的学校名称
let inputSchoolName = ref();
// 不通过的原因
let reason = ref();
// 用户身份
let role = ref();
// 学校表格
let schoolTable = ref();
// 课程表格
let courseTable = ref();
// 学生表格
let studentTable = ref();
// 教师表格
let teacherTable = ref();
// 视频表格
let videoTable = ref();
// 获取当前用户信息
let nowUserInfo = ref({})
// 是否展示资料完善填写区域
let showInputArea = ref(true);
// 当前登录的用户的信息
let nowUserSubmitInfo = ref({})
// 审核不通过时填写原因的弹窗是否显示
let reasonDialogVisible = ref(false);
// 上传文件的链接
let proofImg = ref();
// 查看上传材料弹框是否显示
let proofDialogVisible = ref(false);
// 导入名单弹框是否显示
let importDialogVisible = ref(false);
// 全局变量 当前行内容
let scopeContent = ref();
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;
// 视频观看次数最多的前8个视频
let maxPlayCountVideo = ref([]);
// 访问次数最多的前8个视频
let maxVisitPractice = ref([]);
// 近7天每天的活跃人数
let todayUser = ref([]);
// 近7天日期
let todayHour = ref([]);
// 统计信息
let statisticInfo = ref();
// 用户反馈表格
let suggestionTable = ref();
// 管理员当前正在查看的用户的信息
let editUserInfo = ref({
  username: '',
  phone: '',
  no: '',
  address: '',
  role: ''
});
// 管理员正在查看的课程的信息
let editCourseInfo = ref({
  courseName: '',
  description: '',
  invite: '',
});
// 管理员正在查看的视频的信息
let editVideoInfo = ref({
  title: '',
  cover: '',
});
// 是否显示编辑用户信息窗口
let userInfoDialogVisible = ref(false);
// 是否显示编辑课程信息窗口
let courseDialogVisible = ref(false);
// 是否显示编辑视频信息窗口
let videoDialogVisible = ref(false);
// 选项
const roleOptions = [
  { label: '学生',value: 0,},
  { label: '老师',value: 2,}
];
const courseStateOptions = [
  { label: '课程未开始',value: 0},
  { label: '课程进行中',value: 1},
  { label: '课程已结束',value: 2},
]
/*------------------方法----------------*/
function handleSelect(index) {
  tabIndex.value = index;
}
// 获取上传的文件的链接
function getFileLink(file) {
  proofImg.value = file.data;
}
function importSuccess() {
  ElNotification.success({
    title: '导入成功',
    message: '名单导入成功',
    duration: 2000
  });
  importDialogVisible.value = false;
}
// 绘制 本校观看次数最多的前8个视频 图表
function drawMaxPlayCountVideoEcharts() {
    const dom = document.querySelector('.maxPlayCountVideoEcharts');
    const maxPlayCountVideoEcharts = echarts.init(dom);
    const option = {
      title: {
        text: '本校观看次数最多的前8个视频',
        left: 'center'
      },
      dataset: [
        {
          dimensions: ['title', 'playCount'],
          source: maxPlayCountVideo.value
        },
        {
          transform: {
            type: 'sort',
            config: {dimension: 'playCount', order: 'desc'}
          }
        }
      ],
      // 鼠标悬停显示数据
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#fff', // 悬浮框背景色
        borderColor: '#000', // 悬浮框边框颜色
        borderWidth: 1, // 悬浮框边框宽度
        textStyle: { // 悬浮框文字样式
          color: '#000',
          fontSize: 12
        }
      },
      xAxis: {
        type: 'category',
        axisLabel: {interval: 0, rotate: 30}
      },
      yAxis: {},
      series: {
        type: 'bar',
        encode: {x: 'title', y: 'playCount'},
        datasetIndex: 1
      }
    };
    maxPlayCountVideoEcharts.setOption(option);
}
// 绘制 本校访问次数最多的前8道练习题 图表
function drawMaxVisitPracticeEcharts() {
  const dom = document.querySelector('.maxVisitPracticeEcharts');
  const maxVisitPracticeEcharts = echarts.init(dom);
  const option = {
    title: {
      text: '本校访问次数最多的前8道练习题',
      left: 'center'
    },
    dataset: [
      {
        dimensions: ['name', 'visits'],
        source: maxVisitPractice.value
      },
      {
        transform: {
          type: 'sort',
          config: {dimension: 'visits', order: 'desc'}
        }
      }
    ],
    // 鼠标悬停显示数据
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff', // 悬浮框背景色
      borderColor: '#000', // 悬浮框边框颜色
      borderWidth: 1, // 悬浮框边框宽度
      textStyle: { // 悬浮框文字样式
        color: '#000',
        fontSize: 12
      }
    },
    xAxis: {
      type: 'category',
      axisLabel: {interval: 0, rotate: 30}
    },
    yAxis: {},
    series: {
      type: 'bar',
      encode: {x: 'name', y: 'visits'},
      datasetIndex: 1
    }
  };
  maxVisitPracticeEcharts.setOption(option);
}
// 绘制 本校今日用户活跃度 图表
function drawRecentSevenDayUserEcharts() {
  const dom = document.querySelector('.todayUserEcharts');
  const todayUserEcharts = echarts.init(dom);
  const option = {
    title: {
      text: '今日用户活跃度',
       left: 'center'
    },
    xAxis: {
      type: 'category',
      data: todayHour.value
    },
    yAxis: {
      type: 'value'
    },
    // 鼠标悬停显示数据
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff', // 悬浮框背景色
      borderColor: '#000', // 悬浮框边框颜色
      borderWidth: 1, // 悬浮框边框宽度
      textStyle: { // 悬浮框文字样式
        color: '#000',
        fontSize: 12
      }
    },
    series: [
      {
        data: todayUser.value,
        type: 'line',
        smooth: true
      }
    ]
  };
  todayUserEcharts.setOption(option);
}
/*------------------请求方法----------------*/
// 进入页面时获取当前账号提交的审核信息
getNowUserSubmitInfo().then(res => {
  nowUserSubmitInfo.value = res.data;
  console.log(nowUserSubmitInfo.value.status)
  if ( nowUserSubmitInfo.value.status === 0 ) {
    showInputArea.value = false;
  }
})
// 进入页面时获取当前账号信息
getNowUserInfo().then(res =>{
  nowUserInfo.value = res.data;
  role.value = nowUserInfo.value.role;
  getNowUserSubmitInfo().then(res => {
    nowUserSubmitInfo.value = res.data;
    console.log(nowUserSubmitInfo.value.status)
    if ( nowUserSubmitInfo.value.status === 0 ) {
      showInputArea.value = false;
    }
    // 如果用户审核是管理员 则再进一步获取所有学校信息
    if ( role.value === 3 ) {
      // 如果用户是管理员 默认页面改为审核页面
      tabIndex.value = '7';
      // 获取所有学校信息 所有学生信息 所有教师信息 所有发布的视频 所有开设的课程
      getSchoolInfo().then(res => {
        schoolTable.value = res.data;
      })
      adminGetCourseInfo().then(res => {
        courseTable.value = res.data;
      })
      // role = 0 学生
      adminGetUserInfo(0).then(res => {
        studentTable.value = res.data;
      })
      // role = 2 教师
      adminGetUserInfo(2).then(res => {
        teacherTable.value = res.data;
      })
      adminGetVideoInfo().then(res => {
        videoTable.value = res.data;
      })
      // 进入页面后获取所有用户反馈
      getFeedBack().then(res => {
        suggestionTable.value = res.data;
        console.log(res.data)
      })
    }else {
      // 如果是学校账号 且认证通过 获取本学校的所有学生 所有教师 所有发布的视频 所有开设的课程
      if ( nowUserSubmitInfo.value.status !== -1 ) {
        schoolGetCourseInfo().then(res => {
          courseTable.value = res.data;
        })
        schoolGetUserInfo(0).then(res => {
          studentTable.value = res.data;
        })
        schoolGetUserInfo(2).then(res => {
          teacherTable.value = res.data;
        })
        schoolGetVideoInfo().then(res => {
          videoTable.value = res.data;
        })
      }
    }
    // 获取本学校绘制图表所需的信息
    if ( nowUserSubmitInfo.value.status !== -1 || role.value === 3 ) {
      getMaxPlayCountVideo(role.value).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          let array = [];
          array.push(res.data[i].title);
          array.push(res.data[i].playCount);
          maxPlayCountVideo.value.push(array)
        }
      })
      getMaxVisitPractice(role.value).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          let array = [];
          array.push(res.data[i].name);
          array.push(res.data[i].visits);
          maxVisitPractice.value.push(array)
        }
      })
      getTodayUserInfo(role.value).then(res => {
        todayUser.value = res.data;
        // 将一天24小时按每隔3小时一个时间段分割
        for (let i = 0; i < 24; i += 3) {
          todayHour.value.push(moment().hour(i).format('HH:00') + '-' + moment().hour(i + 3).format('HH:00'));
        }
      })
      getStatisticData(role.value).then(res => {
        statisticInfo.value = res.data;
        console.log(statisticInfo)
      })
    }
  })
})
// 学生管理教师管理点击编辑获取当前正在查看的用户的信息
async function getEditUserInfo(id) {
  const res = await getUserInfoById(id);
  editUserInfo.value = res.data;
}
// 课程管理点击编辑获取当前正在查看的课程的信息
async function getEditCourseInfo(id) {
  const res = await getCourseInfoById(id);
  editCourseInfo.value = res.data;
}
// 视频管理点击编辑获取当前正在查看的视频的信息
async function getEditVideoInfo(id) {
  const res = await getVideoInfoById(id);
  editVideoInfo.value = res.data;
}
// 退出登录
function userLogout() {
  logout().then(() => {
    ElNotification({
      title: '退出成功',
      message: '期待您下次再使用本系统',
      type: 'success',
    })
  });
  router.push("/background/login")
}
// 点击通过按钮 通过学校审核
function passSchoolCheckInfo(id) {
  passSchoolInfo(id).then(res => {
    ElNotification({
      title: '成功',
      message: '审核成功',
      type: 'success',
    })
    getSchoolInfo().then(res => {
      schoolTable.value = res.data;
    })
  })
}
// 管理员不通过用户的审核信息
function refuseSchoolCheckInfo(id,reason) {
  reasonDialogVisible.value = false
  refuseSchoolInfo(id,reason).then(res => {
    ElNotification({
      title: '成功',
      message: '退回成功',
      type: 'success',
    })
    getSchoolInfo().then(res => {
      schoolTable.value = res.data;
    })
  })
}
// 用户提交验证材料
function submitInfo() {
  schoolForm.proofImg = proofImg.value;
  schoolForm.schoolName = inputSchoolName.value;
  console.log(schoolForm)
  submitInformation(schoolForm).then(res => {
    ElNotification({
      title: '提交成功',
      message: '您提交的材料正在审核中',
      type: 'success',
    })
  })
}
/*------------------钩子函数----------------*/
watch(tabIndex, (newVal) => {
  if ( newVal=== '6'  || nowUserSubmitInfo.value.status === 2) {
    nextTick(() => {
      drawMaxPlayCountVideoEcharts();
      drawMaxVisitPracticeEcharts();
      drawRecentSevenDayUserEcharts();
    })
  }
})
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="210px" class="aside">
        <div class="aside-title">
          <el-icon>
            <School></School>
          </el-icon>
          <div>智能教育平台管理系统</div>
        </div>
        <div class="aside-menu">
          <el-menu
              v-model="tabIndex"
              background-color="#333F4F"
              :default-active="role === 3 ? '7' : '1'"
              text-color="#fff"
              :unique-opened="true"
              @select="handleSelect"
          >
            <el-menu-item index="1" v-if="role === 4 && nowUserSubmitInfo.status !== 2">
              <template #title>
                <el-icon><Postcard /></el-icon>
                <span>资料完善</span>
              </template>
            </el-menu-item>
            <el-menu-item index="7" v-if="role === 3">
              <template #title>
                <el-icon><HelpFilled /></el-icon>
                <span>账号审核</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2" v-if="role === 3 || nowUserSubmitInfo.status === 2">
              <template #title>
                <el-icon><User /></el-icon>
                <span>学生管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="3" v-if="role === 3 || nowUserSubmitInfo.status === 2">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>教师管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="4" v-if="role === 3 || nowUserSubmitInfo.status === 2">
              <template #title>
                <el-icon><Compass /></el-icon>
                <span>课程管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="5" v-if="role === 3 || nowUserSubmitInfo.status === 2">
              <template #title>
                <el-icon><VideoCamera /></el-icon>
                <span>视频管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="6" v-if="role === 3 || nowUserSubmitInfo.status === 2">
              <template #title>
                <el-icon><DataLine /></el-icon>
                <span>统计图表</span>
              </template>
            </el-menu-item>
            <el-menu-item index="8" v-if="role === 3">
              <template #title>
                <el-icon><Comment /></el-icon>
                <span>用户反馈</span>
              </template>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header class="header-area">
          <div class="header-icon">
          <el-icon size="20px">
            <Fold></Fold>
          </el-icon>
          <el-icon size="20px" style="margin-left: 15px">
            <RefreshRight></RefreshRight>
          </el-icon>
          </div>
          <span class="header-tip">欢迎使用智能教育平台后台管理系统</span>
          <div class="right-user-info">
            <div class="user-info">
              <div class="right-icon">
                <el-icon size="20px" style="margin-left: 15px">
                  <FullScreen></FullScreen>
                </el-icon>
              </div>
              <div>
              <el-avatar :size="30" :src="circleUrl" class="avatar"/>
              </div>
              <el-dropdown trigger="click" class="dropdown-list">
                <span class="el-dropdown-link">
                  {{ nowUserInfo.username }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :icon="EditPen">修改信息</el-dropdown-item>
                    <el-dropdown-item :icon="CloseBold" @click="userLogout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main class="main-area">
          <el-dialog
              v-model="userInfoDialogVisible"
              title="用户信息"
              width="500"
          >
            <el-form :model="editUserInfo" label-width="auto" label-position="left" style="max-width: 600px">
              <el-form-item v-model="editUserInfo.username" label="用户名">
                <el-input v-model="editUserInfo.username" placeholder="请输入用户名" />
              </el-form-item>
              <el-form-item v-model="editUserInfo.phone" label="手机号">
                <el-input v-model="editUserInfo.phone" placeholder="请输入手机号" />
              </el-form-item>
              <el-form-item v-model="editUserInfo.no" label="学号">
                <el-input v-model="editUserInfo.no" placeholder="请输入学号" />
              </el-form-item>
              <el-form-item v-model="editUserInfo.address" label="地址">
                <el-input v-model="editUserInfo.address" placeholder="请输入地址" />
              </el-form-item>
              <el-form-item v-model="editUserInfo.role" label="角色">
                <el-select
                    v-model="editUserInfo.role"
                    placeholder="请选择身份"
                >
                  <el-option
                      v-for="(item,index) in roleOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="userInfoDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="userInfoDialogVisible = false">
                  提交
                </el-button>
              </div>
            </template>
          </el-dialog>
          <el-dialog
              v-model="courseDialogVisible"
              title="课程信息"
              width="500"
          >
            <el-form :model="editCourseInfo" label-width="auto" label-position="left" style="max-width: 600px">
              <el-form-item v-model="editCourseInfo.courseName" label="课程名">
                <el-input v-model="editCourseInfo.courseName" placeholder="请输入课程名" />
              </el-form-item>
              <el-form-item v-model="editCourseInfo.description" label="课程描述">
                <el-input type="textarea" v-model="editCourseInfo.description" placeholder="请输入课程描述" />
              </el-form-item>
              <el-form-item v-model="editCourseInfo.invite" label="邀请码">
                <el-input v-model="editCourseInfo.invite" placeholder="请输入邀请码" />
              </el-form-item>
              <el-form-item v-model="editCourseInfo.state" label="课程状态">
                <el-select
                    v-model="editCourseInfo.state"
                    placeholder="请选择课程状态"
                >
                  <el-option
                      v-for="(item,index) in courseStateOptions"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="courseDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="courseDialogVisible = false">
                  提交
                </el-button>
              </div>
            </template>
          </el-dialog>
          <el-dialog
              v-model="videoDialogVisible"
              title="视频信息"
              width="500"
          >
            <el-form :model="editVideoInfo" label-width="auto" label-position="left" style="max-width: 600px">
              <el-form-item v-model="editVideoInfo.title" label="视频标题">
                <el-input v-model="editVideoInfo.title" placeholder="请输入视频标题" />
              </el-form-item>
              <el-form-item v-model="editVideoInfo.cover" label="视频封面">
                <el-upload
                    drag
                    action=""
                    style="width: 100%"
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    将视频拖拽至此或 <em>单击以上传</em>
                  </div>
                </el-upload>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="videoDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="videoDialogVisible = false">
                  提交
                </el-button>
              </div>
            </template>
          </el-dialog>
          <div v-if="tabIndex === '1'" class="information-complete">
            <div v-if="nowUserSubmitInfo.status === -1 || nowUserSubmitInfo.status === 0">
              <el-form :model="schoolForm" label-width="120px">
                <div v-if="showInputArea === false" class="result-area">
                  <el-result
                      icon="error"
                      title="审核未通过"
                      :sub-title=nowUserSubmitInfo.reason
                  >
                    <template #extra>
                      <el-button type="primary" @click="showInputArea = true">重新填写</el-button>
                    </template>
                  </el-result>
                </div>
                <div v-else>
                  <el-form-item :label="'学校名称'">
                    <el-input v-model="inputSchoolName" placeholder="请输入学校名称" style="width: 360px"></el-input>
                  </el-form-item>
                  <el-form-item :label="'证明材料'">
                    <el-upload
                        drag
                        action="/api/admin/upload"
                        :on-success="getFileLink"
                        style="width: 100%"
                    >
                      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                      <div class="el-upload__text">
                        将材料拖拽或 <em>点击以上传</em>
                      </div>
                      <template #tip>
                        <div class="el-upload__tip">
                          jpg/png files with a size less than 500kb
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>
                  <div class="submit-button">
                    <el-button type="success" @click="submitInfo">提交</el-button>
                    <el-button>重置</el-button>
                  </div>
                </div>
              </el-form>
            </div>
            <div v-else-if="nowUserSubmitInfo.status === 1" class="result-area">
              <el-result icon="info" title="请稍等">
                <template #sub-title>
                  <p>你提交的材料正在审核中......</p>
                </template>
                <template #extra>
                  <el-button type="primary">确定</el-button>
                </template>
              </el-result>
            </div>
          </div>
          <div v-else-if="tabIndex === '2'" class="student-area">
            <div class="student-main-title">
              <div class="student-main-search">
                <el-input placeholder="请输入搜索内容"></el-input>
                <el-button type="primary" style="margin-left: 10px">点击查询</el-button>
              </div>
              <div class="student-main-buttons">
                <el-button type="success">添加学生</el-button>
                <el-button type="warning" @click="importDialogVisible = true">导入名单</el-button>
              </div>
            </div>
            <div class="student-main-table">
              <el-dialog
                  v-model="importDialogVisible"
                  title="学生名单"
                  width="500"
              >
                <el-upload
                    class="upload-demo"
                    drag
                    :action="'/api/admin/importExcelUser?role=0'"
                    :on-success="importSuccess"
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    将文件拖拽至此 <em>或单击此处以上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      请上传excel文件
                    </div>
                  </template>
                </el-upload>
              </el-dialog>
              <el-table :data="studentTable" style="width: 100%">
                <el-table-column prop="username" label="用户名" width="200" />
                <el-table-column prop="phone" label="手机号" width="200" />
                <el-table-column prop="createTime" label="注册时间" width="200" />
                <el-table-column prop="updateTime" label="上次登录时间" width="200" />
                <el-table-column prop="no" label="学号" width="200" />
                <el-table-column prop="address" label="住址" width="400" />
                <el-table-column fixed="right" label="操作" width="120">
                  <template #default="scope">
                    <el-button link type="primary" size="small" @click="getEditUserInfo(scope.row.id);userInfoDialogVisible = true">编辑</el-button>
                    <el-popconfirm title="确定要删除吗">
                      <template #reference>
                        <el-button link type="danger" size="small">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div v-else-if="tabIndex === '3'" class="teacher-area">
            <div class="teacher-main-title">
              <div class="teacher-main-search">
                <el-input placeholder="请输入搜索内容"></el-input>
                <el-button type="primary" style="margin-left: 10px">点击查询</el-button>
              </div>
              <div class="teacher-main-buttons">
                <el-button type="success">添加教师</el-button>
                <el-button type="warning" @click="importDialogVisible = true">导入名单</el-button>
              </div>
            </div>
            <div class="teacher-main-table">
              <el-dialog
                  v-model="importDialogVisible"
                  title="教师名单"
                  width="500"
              >
                <el-upload
                    class="upload-demo"
                    drag
                    :action="'/api/admin/importExcelUser?role=2'"
                    :on-success="importSuccess"
                >
                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                  <div class="el-upload__text">
                    将文件拖拽至此 <em>或单击此处以上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      请上传excel文件
                    </div>
                  </template>
                </el-upload>
              </el-dialog>
              <el-table :data="teacherTable" style="width: 100%">
                <el-table-column prop="username" label="用户名" width="200" />
                <el-table-column prop="phone" label="手机号" width="200" />
                <el-table-column prop="createTime" label="注册时间" width="200" />
                <el-table-column prop="updateTime" label="上次登录时间" width="200" />
                <el-table-column prop="no" label="学号" width="200" />
                <el-table-column prop="address" label="住址" width="400" />
                <el-table-column fixed="right" label="操作" width="120">
                  <template #default="scope">
                    <el-button link type="primary" size="small" @click="getEditUserInfo(scope.row.id);userInfoDialogVisible = true">编辑</el-button>
                    <el-popconfirm title="确定要删除吗">
                      <template #reference>
                        <el-button link type="danger" size="small">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div v-else-if="tabIndex === '4'" class="course-area">
            <el-table :data="courseTable" style="width: 100%">
              <el-table-column prop="courseName" label="课程名" width="250" />
              <el-table-column prop="teacherName" label="开课教师名" width="200" />
              <el-table-column prop="createTime" label="开课时间" width="200" />
              <el-table-column prop="description" label="课程描述" width="300" />
              <el-table-column prop="number" label="参加人数" width="100" />
              <el-table-column prop="invite" label="邀请码" width="150" />
              <el-table-column label="课程状态" width="200">
                <template v-slot:default="scope">
                  <el-tag :effect="'dark'" v-if="scope.row.state === 0" type="info">课程未开始</el-tag>
                  <el-tag :effect="'dark'" v-if="scope.row.state === 1" type="success">课程进行中</el-tag>
                  <el-tag :effect="'dark'" v-if="scope.row.state === 2" type="warning">课程已结束</el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="getEditCourseInfo(scope.row.id);courseDialogVisible = true">编辑</el-button>
                  <el-popconfirm title="确定要删除吗">
                    <template #reference>
                      <el-button link type="danger" size="small">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else-if="tabIndex === '5'" class="video-area">
            <el-table :data="videoTable" style="width: 100%">
              <el-table-column prop="title" label="视频标题" width="200" />
              <el-table-column label="封面图" width="200">
                <template v-slot:default="scope">
                  <el-image :src="scope.row.cover" alt=""></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="publisherName" label="发布者名称" width="200" />
              <el-table-column prop="playCount" label="播放量" width="200" />
              <el-table-column prop="collectCount" label="收藏量" width="200" />
              <el-table-column prop="createTime" label="发布日期" width="250" />
              <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="getEditVideoInfo(scope.row.id);videoDialogVisible = true">编辑</el-button>
                  <el-popconfirm title="确定要删除吗">
                    <template #reference>
                      <el-button link type="danger" size="small">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else-if="tabIndex === '6'" class="echarts-area">
            <!-- 统计数据 -->
            <el-card class="show-statistic">
              <el-row :gutter="24">
                <el-col :span="6" v-for="(item,index) in statisticInfo" :key="index">
                  <div class="statistic-card">
                    <el-statistic :value="item.statisticData">
                      <template #title>
                        <div style="display: inline-flex; align-items: center">
                          {{ item.statisticName }}
                        </div>
                      </template>
                    </el-statistic>
                    <div class="statistic-footer">
                      <div class="footer-item">
                        <span>较昨天相比</span>
                        <span :class="item.isIncrease === 1 ? 'green' : 'red'">
                          {{ item.increaseRate + '%' }}
                          <el-icon v-if="item.isIncrease === 1">
                            <CaretTop />
                          </el-icon>
                          <el-icon v-else>
                            <CaretBottom />
                          </el-icon>
                        </span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <div class="show-echarts">
              <el-row :gutter="24" class="echarts-row">
                <el-col :span="12" class="echarts-col">
                  <el-card class="echarts-style">
                    <div class="maxPlayCountVideoEcharts" style="width: 100%;height: 100%"></div>
                  </el-card>
                </el-col>
                <el-col :span="12" class="echarts-col">
                  <el-card class="echarts-style">
                    <div class="maxVisitPracticeEcharts" style="width: 100%;height: 100%"></div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div class="show-echarts">
              <el-row :gutter="24" class="echarts-row">
                <el-col :span="12" class="echarts-col">
                  <el-card class="echarts-style">
                    <div class="todayUserEcharts" style="width: 100%;height: 100%"></div>
                  </el-card>
                </el-col>
                <el-col :span="12" class="echarts-col">
                  <el-card class="echarts-style">
                    <div class="maxVisitKnowledgeEcharts" style="width: 100%;height: 100%">
                      <div class="title">课程考勤率/任务完成率</div>
                      <el-progress type="dashboard" :percentage="78" style="margin-right: 100px;">
                        <template #default="{ percentage }">
                          <span class="percentage-value">{{ percentage }}%</span>
                          <span class="percentage-label"><strong>考勤率</strong></span>
                        </template>
                      </el-progress>
                      <el-progress type="dashboard" :percentage="60" style="margin-left: 100px" color="#67C23A">
                        <template #default="{ percentage }">
                          <span class="percentage-value">{{ percentage }}%</span>
                          <span class="percentage-label"><strong>任务完成率</strong></span>
                        </template>
                      </el-progress>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
          <div v-else-if="tabIndex === '7'">
            <el-dialog
                v-model="proofDialogVisible"
                title="证明材料"
                width="500"
            >
              <el-image :src="scopeContent.proofImg"></el-image>
            </el-dialog>
            <el-dialog
                v-model="reasonDialogVisible"
                title="退回原因填写表"
                width="500"
            >
              <el-input v-model="reason" placeholder="请填写退回原因"></el-input>
              <template #footer>
                <div class="dialog-footer">
                  <el-button type="primary" @click="refuseSchoolCheckInfo(scopeContent.id,reason)">
                    确定
                  </el-button>
                  <el-button @click="reasonDialogVisible = false">取消</el-button>
                </div>
              </template>
            </el-dialog>
            <el-table :data="schoolTable" style="width: 100%">
              <el-table-column prop="username" label="审核用户名" width="350" />
              <el-table-column prop="schoolName" label="学校名称" width="350" />
              <el-table-column prop="proofImage" label="证明材料" width="250">
                <template v-slot:default="scope">
                  <el-button size="small" type="success" @click="proofDialogVisible = true;scopeContent = scope.row;">点我查看</el-button>
                </template>
              </el-table-column>
              <el-table-column label="审核状态" width="200">
                <template v-slot:default="scope">
                  <el-tag :effect="'dark'" v-if="scope.row.status === 0" type="danger">审核不通过</el-tag>
                   <el-tag :effect="'dark'" v-if="scope.row.status === 1" type="warning">未审核</el-tag>
                   <el-tag :effect="'dark'" v-if="scope.row.status === 2" type="info">审核已通过</el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="283">
                <template v-slot:default="scope">
                  <el-button type="primary" size="small" @click="passSchoolCheckInfo(scope.row.id)">
                    通过
                  </el-button>
                  <el-button type="danger" size="small" @click="reasonDialogVisible = true;scopeContent = scope.row;">退回</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else-if="tabIndex === '8'">
            <el-table :data="suggestionTable" style="width: 100%">
              <el-table-column prop="content" label="反馈内容" width="600" />
              <el-table-column prop="createTime" label="反馈时间" width="200" />
            </el-table>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
@keyframes leftMoveIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
.common-layout {
  .aside-title {
    height: 55px;
    background-color: #4884b1;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .aside-menu {
    height: 94vh;
    background-color: #333F4F;
    .el-menu-item.is-active {
      background-color: #263442;
    }
  }
  .header-area {
    display: flex;
    height: 55px;
    position: relative;
    .header-icon {
      cursor: pointer;
      margin-top: 17px;
    }
    .header-tip {
      margin-left: 15px;
      font-size: 16px;
      line-height: 55px;
    }
    .right-user-info {
      position: absolute;
      right: 0;
      top: 25%;
      .user-info {
        display: flex;
        .right-icon {
          margin-top: 5px;
          margin-right: 10px;
        }
        .avatar {
          cursor: pointer;
        }
        .dropdown-list {
          cursor: pointer;
          margin-left: 5px;
          margin-top: 5px;
        }
      }
    }
  }
  .main-area {
    height: 94vh;
    background-color: #EAEDF1;
    position: relative;
    .information-complete {
      animation: leftMoveIn .7s ease-in;
      position: absolute;
      top: 20%;
      left: 30%;
      .submit-button {
        position: absolute;
        left: 50%;
      }
      .result-area {
        padding-left: 150px;
      }
    }
    .student-area {
      height: 100%;
      width: 100%;
      animation: leftMoveIn .7s ease-in;
      .student-main-title {
        display: flex;
        position: relative;
        .student-main-search {
          display: flex;
        }
        .student-main-buttons {
          position: absolute;
          right: 0;
        }
      }
      .student-main-table {
        margin-top: 15px;
      }
    }
    .teacher-area {
      height: 100%;
      animation: leftMoveIn .7s ease-in;
      .teacher-main-title {
        display: flex;
        position: relative;
        .teacher-main-search {
          display: flex;
        }
        .teacher-main-buttons {
          position: absolute;
          right: 0;
        }
      }
      .teacher-main-table {
        margin-top: 15px;
      }
    }
    .course-area {
      animation: leftMoveIn .7s ease-in;
    }
    .video-area {
      animation: leftMoveIn .7s ease-in;
    }
    .echarts-area {
      width: 100%;
      animation: leftMoveIn .7s ease-in;
      position: relative;
      .show-statistic {
        width: 100%;
        :global(h2#card-usage ~ .example .example-showcase) {
          background-color: var(--el-fill-color) !important;
        }

        .el-statistic {
          --el-statistic-content-font-size: 28px;
        }

        .statistic-card {
          margin-left: 70px;
          height: 100%;
          padding: 20px;
          border-radius: 4px;
        }

        .statistic-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          font-size: 12px;
          color: var(--el-text-color-regular);
          margin-top: 16px;
        }

        .statistic-footer .footer-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .statistic-footer .footer-item span:last-child {
          display: inline-flex;
          align-items: center;
          margin-left: 4px;
        }

        .green {
          color: var(--el-color-success);
        }
        .red {
          color: var(--el-color-error);
        }
      }
      .show-echarts {
        margin-top: 35px;
        height: 310px;
        .echarts-row {
          height: 100%;
          .echarts-col {
            height: 100%;
            .echarts-style {
              width: 100%;
              height: 100%;
              .maxVisitKnowledgeEcharts {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                .title {
                  font-size: 18px;
                  font-weight: bold;
                  position: absolute;
                  left: 40%;
                  top: 0;
                }
                .percentage-value {
                  display: block;
                  margin-top: 10px;
                  font-size: 28px;
                }
                .percentage-label {
                  display: block;
                  margin-top: 10px;
                  font-size: 12px;
                }
              }
            }
            .echarts-style /deep/ .el-card__body {
              width: 100%;
              height: 100%;
              padding: 0px !important;
            }
          }
        }
      }
    }
  }
}
</style>